<script setup>
import { ref } from 'vue'
import { Plus} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import NewFooter from "@/components/Footer.vue";
import {userUpdateInfoService,userUpdateAvatar} from "@/api/user";
import request from '@/utils/request'

const userStore = useUserStore()
/*头像部分代码 */
const isUpload = ref(true);

const agentAppearanceQiniuUrl = ref('');

const fileList = ref([])

const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const handleRemove = (file) => {
  console.log(file)
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = agentAppearanceQiniuUrl.value;
  dialogVisible.value = true;
};

const httpRequest = async (vale) => {
  const formData = new FormData();
  formData.append('file', vale.file);
   // 使用 Axios 或其他 HTTP 请求库发送请求给后端
    request.post( '/qiniu/uploadImage', formData, {
    headers: {
      'Content-Type': 'multipart/form-data', // 设置请求头，告诉后端这是一个 FormData 类型的请求
    }
  }).then (response => {
    userStore.user.avatar=response.data.data.path
    userUpdateAvatar(userStore.userid,response.data.data.path)
    ElMessage({
      message: "头像上传成功",
      type: "success"
    })
    agentAppearanceQiniuUrl.value = response.data.data.path
    isUpload.value = false;
  }).catch(error => {
    ElMessage({
      message: "头像上传失败",
      type: "error"
    })
    ElMessage({
      message: error,
      type: "error"
    })
  });
}

/*个人信息部分代码*/
const {
  user: { name, phon ,sex, age,email, id, sign },getUser
} = useUserStore()

const userInfo = ref({ name,phon,age, sex, email, id , sign})

const rules = {
  name: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
  phon: [
    { required: true, message: '请输入用户手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式不正确',
      trigger: 'blur'
    }
  ]
}

const formRef = ref()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await userUpdateInfoService(userInfo.value)
    await getUser(userStore.userid)
    ElMessage.success('修改成功')
  }
}
</script>


<template>

  <div class="body">
<!--   头像部分 -->
    <div class="avatar-div">
    <el-row>
      <el-col :span="12">
        <!-- 上传图片 -->
        <el-upload
            style="margin-top: 10px"
            list-type="picture-card"
            :auto-upload="true"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :clearFiles="handleRemove"
            :http-request="httpRequest"
            v-model:file-list="fileList"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <!-- 放大图片 -->
        <el-dialog v-model="dialogVisible">
          <img
              w-full
              :src="userStore.user.avatar"
              alt="Preview Image"
          />
        </el-dialog>
      </el-col>
    </el-row>
    </div>

<!--  个人信息展示部分-->
    <div class="profile-div">
      <el-row>
        <el-col :span="12">
          <el-form
              :model="userInfo"
              :rules="rules"
              ref="formRef"
              label-width="100px"
              size="large"
          >
            <el-form-item label="登录名称" prop="name">
              <el-input v-model="userInfo.name"  ></el-input>
            </el-form-item>
            <div class="input-sex">
              <el-radio-group v-model="userInfo.sex" class="ml-4">
                <el-radio class="radio" value="Mail" size="large">男</el-radio>
                <el-radio class="radio" value="Female" size="large">女</el-radio>
              </el-radio-group>
            </div>
            <el-form-item label="年龄" >
              <el-input v-model="userInfo.age" type="number"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phon">
              <el-input v-model="userInfo.phon"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="个人签名" >
              <el-input
                  v-model="userInfo.sign"
                  :rows="2"
                  maxlength="50"
                  show-word-limit
                  type="textarea"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
<!--    底部-->
    <new-footer></new-footer>

</template>

<style lang="scss" scoped>
.body{
  background-color:#FFFFFF ;
}
.input-sex{
  display: inline-block;
}
.radio{
  left: 100px;
  display: inline-block;
}
.avatar-div{
  position: relative;
  margin-left: 400px ;

}
.profile-div{
  position: relative;
  margin-top: 20px;
  margin-left: 300px ;
}
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
